<!-- 出勤填报 -->
<template>
	<div id="attenDanceReport">
		<a-table :columns="columns" :data-source="list" size="small" bordered :pagination="false" :loading="tableLoading">
			<template #bodyCell="{ column, text, record }">
				<template v-if="column.dataIndex === 'attendUser'">
					<div class="editable-cell">
						<div v-if="editableData[record.id]" class="editable-cell-input-wrapper">
							<a-input
								type="number"
								min="0"
								v-model:value="editableData[record.id].attendUser"
								@pressEnter="saveEdit(record.id)"
							/>
							<a-button type="link" @click="saveEdit(record.id)">
								<CheckOutlined />
							</a-button>
							<a-button type="link" danger @click="cancelEdit(record.id)">
								<CloseOutlined />
							</a-button>
						</div>
						<div v-else class="editable-cell-text-wrapper">
							{{ text || 0 }}
							<a-button type="link" @click="saveEdit(record.id)">
								<edit-outlined @click="addEdit(record)" />
							</a-button>
						</div>
					</div>
				</template>
			</template>
		</a-table>
	</div>
</template>
<script setup name="attenDanceReport">
	import attendanceApi from '@/api/bi/dataBoard/attendance/attendanceApi'
	// ===========================================DATA======================================================
	const list = ref([])
	const columns = [
		{
			title: '项目名称',
			dataIndex: 'projectName'
		},
		{
			title: '出勤人数',
			dataIndex: 'attendUser',
			width: 500
		}
	]
	const editableData = ref({})
	const tableLoading = ref(false)
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		pagelist()
	})
	// ===========================================METHODS==================================================
	const addEdit = (row) => {
		editableData.value[row.id] = JSON.parse(JSON.stringify(row))
	}
	const cancelEdit = (id) => {
		delete editableData.value[id]
	}
	// ===========================================REQUEST==================================================
	const pagelist = () => {
		tableLoading.value = true
		// list.value = [
		// 	{
		// 		id: 1,
		// 		projectName: '度小满',
		// 		currentDay: '2025/7/9',
		// 		attendUser: 20
		// 	},
		// 	{
		// 		id: 2,
		// 		projectName: '360',
		// 		currentDay: '2025/7/10',
		// 		attendUser: 30
		// 	},
		// 	{
		// 		id: 3,
		// 		projectName: '微财科技',
		// 		currentDay: '2025/7/11',
		// 		attendUser: 40
		// 	}
		// ]
		attendanceApi.list().then((res) => {
			list.value = res
			tableLoading.value = false
		})
	}

	const saveEdit = (id) => {
		const data = {
			id,
			attendUser: editableData.value[id].attendUser
		}
		attendanceApi.edit(data).then((res) => {
			delete editableData.value[id]
			pagelist()
		})
	}
</script>
<style lang="less" scoped>
	.editable-cell {
		position: relative;
		.editable-cell-input-wrapper,
		.editable-cell-text-wrapper {
			padding-right: 24px;
		}
		.editable-cell-input-wrapper {
			display: flex;
		}

		.editable-cell-text-wrapper {
			padding: 5px 24px 5px 5px;
		}

		.editable-cell-icon,
		.editable-cell-icon-check {
			position: absolute;
			right: 0;
			width: 20px;
			cursor: pointer;
		}

		.editable-cell-icon-check {
			line-height: 28px;
		}

		.editable-cell-icon:hover,
		.editable-cell-icon-check:hover {
			color: #108ee9;
		}

		.editable-add-btn {
			margin-bottom: 8px;
		}
	}
</style>
